<template>
	<view class="siteAdd">
		<view class="siteAdd-top">
			<view class="siteAdd-text" @click="GoCity">
				<text>
					北京0000
				</text>
				<image src="../../../../static/image/下箭头.png" mode="scaleToFill" />
			</view>
			<view class="siteAdd-inp">
				<up-input class="inp" border="surround" v-model="value" @change="change"></up-input>
				<view v-show="show" class="suo">
					<image src="../../../../static/image/搜索.png" mode="scaleToFill" />
					搜索
				</view>
			</view>
		</view>

		<view class="siteAdd-text-cont">
			<image
				src="https://cdn7.axureshop.com/demo/1996612/images/%E6%B7%BB%E5%8A%A0%E6%B0%B4%E8%B4%B9%E6%88%B7%E5%8F%B7/u2025.svg"
				mode="scaleToFill" />
			<view>
				可通过交费账单或短信查看交费单位
			</view>
		</view>
		<view class="siteAdd-list">
			<view>
				<text>北京市西城区供水有限责任公司</text>
			</view>
			<view>
				<text>北京市朝阳区供水有限责任公司</text>
			</view>
			<view>
				<text>北京市海淀区供水有限责任公司</text>
			</view>
			<view>
				<text>北京市房山区供水有限责任公司</text>
			</view>
			<view>
				<text>北京市东城区供水有限责任公司</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from "vue"
const value = ref("")
let show = ref(true)
let change = () => {
	show.value = value.value !== "" ? false : true
}
let GoCity = ()=>{
	uni.navigateTo({
		url:'/pages/waterElectric/components/AccountAdd/AddCity'
	})
}

</script>

<style lang="scss" scoped>
.siteAdd {
	height: calc(100vh - 91rpx);
	background-color: #f5f5f5;
	padding: 0 30rpx;
	box-sizing: border-box;
}

.siteAdd-top {
	display: flex;

	.siteAdd-text {
		display: flex;
		align-items: center;
		width: 100rpx;

		text {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		image {
			// margin-left: 10rpx;
			width: 20rpx;
			height: 20rpx;
			vertical-align: middle;
		}
	}

	.siteAdd-inp {
		margin-left: 30rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		flex: 1;
		background-color: #fff;
		border-radius: 30rpx;
		font-size: 24rpx;
		position: relative;

		.suo {
			position: absolute;
			left: 45%;
			color: #d7d7d7;

			.inp {
				text-align: left !important;
			}

			image {
				width: 30rpx;
				height: 30rpx;
				vertical-align: middle;
				margin-top: -8rpx;
			}
		}
	}
}

.siteAdd-text-cont {
	display: flex;
	align-items: center;
	color: #f4a53d;
	font-size: 24rpx;
	height: 80rpx;
	line-height: 80rpx;

	image {
		width: 30rpx;
		height: 30rpx;
		vertical-align: middle;
	}
}

.siteAdd-list {
	width: 100vw;
	margin-left: -30rpx;
	background-color: #fff;
	color: #9c9c9c;
	font-size: 24rpx;

	view {
		width: 100vw;
		border-bottom: #d7d7d7 1rpx solid;
		height: 80rpx;
		line-height: 80rpx;

		// margin-left: 60rpx;
		text {
			padding-left: 60rpx;
		}
	}
}
</style>
